<template>
  <div class="fans-container">
    <div class="fans-list">
      <div v-for="fan in fansList" :key="fan.userId" class="fan-card">
        <div class="fan-avatar">
          <el-avatar :src="fan.avatarUrl" :size="60" />
        </div>
        <div class="fan-content">
          <div class="fan-info">
            <span class="nickname">{{ fan.nickname }}</span>
            <el-button
              :type="fan.mutual ? 'default' : 'primary'"
              size="small"
              @click="handleFollow(fan)"
            >
              {{ fan.mutual ? '= 已互关' : '+ 关注' }}
            </el-button>
          </div>
          <div class="signature">{{ fan.signature || '这个人很懒,什么都没留下' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getUserFans, followUser } from '@/assets/apis/http'
import { useUserStore } from '@/store/UserStore'
import { onMounted, ref } from "vue"
import { Follow } from "@/assets/apis/MusicDataType"
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const fansList = ref<Follow[]>([])

// 获取粉丝列表
async function getFollows() {
    const res = await getUserFans({
      uid: userStore.userInfo.userId,
      limit: 50,
      offset: 0
    })
    console.log("查询粉丝", res)
    fansList.value = res.followeds || []
}

// 处理关注/取消关注
async function handleFollow(fan: Follow) {
  try {
    const t = fan.mutual ? 2 : 1 // 1:关注 2:取消关注
    await followUser({
      id: fan.userId,
      t: t
    })
    // 更新本地数据
    const index = fansList.value.findIndex(item => item.userId === fan.userId)
    if (index !== -1) {
      fansList.value[index].mutual = !fan.mutual
    }
    ElMessage.success(fan.mutual ? '已取消关注' : '关注成功')
  } catch (error) {
    console.error('关注操作失败:', error)
    ElMessage.error('操作失败,请稍后重试')
  }
}

onMounted(() => {
  getFollows()
})
</script>

<style scoped lang="scss">
.fans-container {
  height: 100%;
  padding: 10px; // 移除右侧padding，改为容器右侧margin
  overflow-y: auto; // 添加垂直滚动
  box-sizing: border-box;

  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--el-border-color-lighter);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .fans-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); // 自适应卡片宽度
    gap: 20px;
    margin-right: 20px; // 添加右侧边距

    .fan-card {
      display: flex;
      align-items: center;
      padding: 15px;
      background-color: var(--el-bg-color);
      border-radius: 8px;
      transition: all 0.3s;
      cursor: pointer;
      min-width: 0; // 防止卡片溢出

      &:hover {
        background-color: var(--el-fill-color-light);
        transform: translateY(-2px);
      }

      .fan-avatar {
        margin-right: 15px;
        flex-shrink: 0; // 防止头像被压缩
      }

      .fan-content {
        flex: 1;
        min-width: 0; // 防止文本溢出

        .fan-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .nickname {
            font-size: 16px;
            font-weight: 500;
            margin-right: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          :deep(.el-button) {
            min-width: 80px;
            flex-shrink: 0; // 防止按钮被压缩
          }
        }

        .signature {
          font-size: 13px;
          color: var(--el-text-color-secondary);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
